<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 90%">
<div id="container" style="height: 90%"></div>


<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
    var chartDom = document.getElementById('container');
    var myChart = echarts.init(chartDom);
    myChart.getZr().on('click', function(params) {
      const pointInPixel = [params.offsetX, params.offsetY]
      const { target, topTarget } = params
      if (target?.z === 2 || topTarget?.z === 2) {
        const axs = target? target.seriesIndex: topTarget.parent?.parent?.__ecComponentInfo?.index
        console.log(axs)
      }
    })
    myChart.getZr().on('mousemove', function(params) {
      const { topTarget } = params
      if (topTarget?.z === 2) {
        myChart.getZr().setCursorStyle('pointer')
      }
    })

    function loadEcharts(dataArray){
        var array = JSON.parse(dataArray);
        var option;
        option = {
              grid: { x: 50, y: 25, x2: 30, y2: 20 },
              tooltip: {
                trigger: 'axis',
                backgroundColor:'#1E3D47',
                borderColor : '#1E3D47',
                textStyle: {
                    color:'#ffffff',
                },
                formatter: '{c}<br/>{b}'
              },

              xAxis: {
                   axisPointer: {
                      lineStyle: {
                        width: 0
                      },
                   },
                   axisLine: {
                       show: true,
                    },
                    axisTick: {
                      show: false
                    },
                  boundaryGap: false,
                  type: 'category',
                  axisLabel:{
                    showMaxLabel: true,
                  },
                  data: array.xLabel
              },
              yAxis: {
                type: 'value',
                 axisLine: {
                  show: true,
                },
                 splitLine: {
                  show: false
                },
                data: array.yLabel
              },
              series: [
                {
                    animationDuration: 200,
                    animationEasing: "cubicInOut",

                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: 'rgba(69, 161, 201, 1)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(31, 31, 31, 0)'
                          }
                        ])
                  },
                  lineStyle: {
                    color: '#56CCFF',
                    width: 3,
                  },
                  itemStyle : {
                                normal : {
                                    color:'#FFF',
                                    lineStyle:{
                                        color:'#56CCFF'
                                    }
                                }
                            },
                  data: array.Data,
                  type: 'line',
                  smooth: true
                }
              ]
        };

        option && myChart.setOption(option);
    }

  </script>
</body>
</html>